<template>
	<view>
		<view class="spread-box" :style="'-webkit-line-clamp:'+(spread ? height:'' )">
			<rich-text :nodes="text"></rich-text>
		</view>
		<view class="text-left text-df" v-if="showBtn">
			<text v-if="spread == false" @tap="spreadText()" class="margin-top-xs text-blue" style="display:inline-block;">
			  展开
			</text>		
			<text v-if="spread == true" @tap="spreadText()" class="margin-top-xs text-blue" style="display:inline-block;">
			  收起
			</text>
		</view>
	</view>
</template>

<script>	
	export default {
		data() {
			return {
				content:"",
				count:0,
				height:0,
				showBtn:false,
				spread:true,
			};
		},
		name: 'rich-spread',
		props: {
			text:{
				type:String,
				default:""
			},
			maxWord:{
				type:Number,
				default:170
			},
			line:{
				type:Number,
				default:3
			}
		},
		created() {			
			this.content=this.text	
			this.count=(this.text && this.text.replace(/[^\x00-\xff]/g, "xx").length) || 0;
			this.height=this.line
			
			if(this.count>this.maxWord){
				this.showBtn=true
			}
		},
		methods: {
			spreadText() {
			  this.spread = !this.spread;
			},
		}
	}
</script>

<style scoped>
	.spread-box {
	  overflow: hidden;
	  text-overflow: ellipsis;
	  display: -webkit-box;
	  -webkit-box-orient: vertical;
	}
</style>
